<template>
  <div class="person">
   <h2>姓名:{{ name }}</h2>
   <h2>年龄:{{ age }}</h2>
   <h2>解构的年龄:{{ nl }}</h2>
   <button @click="changeName">改变姓名</button>
   <button @click="changeAge">改变年龄</button>
  </div>
</template>
<script setup lang="ts" name="person">
import { ref, reactive, toRefs,toRef } from "vue";

// 数据
const person = reactive({
  name:"张三",
  age:18
})
let x = toRefs(person)
console.log(x);
let nl = toRef(person,"age")
console.log(nl.value);

// 响应式会掉
let {name, age } = toRefs(person)

//方法
const changeName =()=>{
  name.value += "三"
  console.log(name.value,person.name);
  
}
const changeAge =()=>{
  age.value += 1
  console.log(age.value,person.age);

}

</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
</style>
